<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签栏切换效果</title>
    <style>
      body
      {
        background-color: #F3EFE0;
      }
      .bot
      {
        color: #918E84;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 24px;
        position: relative;
        top: 300px;
        right: 250px;
        float: right;
      }
      ul{
        list-style:none;
      }
      .tab-box
      {
        width:400px;
        margin:10px auto;
      }
      .tab-head
      {
        height:31px;
      }
      .tab-head-div
      {
        width:95px;
        height:30px;
        float:left;
        border-right:1px solid #ccc;
        background:blue;
        line-height:30px;
        text-align:center;
        cursor:pointer;
        color:#fff;
      }
      .tab-head .current
      {
        background:#fff;
        border-bottom:1px solid #fff;
        color:#000;
      }
      .tab-head-r
      {
        border-right:0;
      }
      .tab-body-div
      {
        display:none;
        margin:20px 10px;
      }
      .tab-body .current
      {
        display:block;
      }
      a{
        position: relative;
        right: 250px;
        float: right;
        font-size: large;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="tab-box">
      <div class="tab-head">
        <div class="tab-head-div current">标签一</div>
        <div class="tab-head-div">标签二</div>
        <div class="tab-head-div">标签三</div>
        <div class="tab-head-div tab-head-r">标签四</div>
      </div>
      <div class="tab-body">
        <div class="tab-body-div current"> 1 </div>
        <div class="tab-body-div"> 2 </div>
        <div class="tab-body-div"> 3 </div>
        <div class="tab-body-div"> 4 </div>
      </div>
    </div>
    <br><br><br>
    <a href="../章节目录/第七章.html">返回上一页</a>
    <script>
      // 获取标签栏的所有标签元素对象
      var tabs = document.getElementsByClassName('tab-head-div');
      // 获取标签栏的所有内容对象
      var divs = document.getElementsByClassName('tab-body-div');
      for (var i = 0; i < tabs.length; ++i) {        // 遍历标签部分的元素对象
        tabs[i].onmouseover = function() {           // 为标签元素对象添加鼠标滑过事件
          for (var i = 0; i < divs.length; ++i) {    // 遍历标签栏的内容元素对象
            if (tabs[i] == this) {    // 显示当前鼠标滑过的li元素
              divs[i].classList.add('current');
              tabs[i].classList.add('current');
            } else {                  // 隐藏其他li元素
              divs[i].classList.remove('current');
              tabs[i].classList.remove('current');
            }
          }
        };
      }
    </script>
    <div class="bot"><br>
      <h3>Please appreciate((●'◡'●))......</h3>
    </div>
  </body>
</html>